<!-- http://stackoverflow.com/questions/9307895/client-side-pagination-via-javascript
http://stackoverflow.com/questions/10460769/jquery-fancybox-is-not-working-with-data-from-json-call
-->
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>No title</title>
    <link rel="stylesheet" href="/kh/css/styles.css" type="text/css"/>
    <!--link rel="stylesheet" type="text/css" href="/kh/css/jquery.lightbox-0.5.css" media="screen" /-->
    <link rel="stylesheet" type="text/css" href="/kh/css/jquery.fancybox.css"/>

    <script type="text/javascript" src="/kh/js/jquery-1.7.2.js"></script>
    <!--script type="text/javascript" src="/kh/js/jquery.lightbox-0.5.js"></script-->
    <script type="text/javascript" src="/kh/js/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/kh/js/jquery.livequery.js"></script>
</head>
<body>
<div id="page">
    <div id="container" style="width: 500px; border: 1px solid;">
        <h1><a href="#">Title</a></h1>
        <h4><a href="/kh/upload/">Insert image here>></a></h4>

        <div id="thumbs" class="navigation">
            <div class="top pagination">
                <!--span class="current">1</span>
                <a title="2" href="#16" rel="history">2</a -->
                <a class="prev1" title="Next ›" href="#"  rel="history">Prev &lsaquo;</a>
                <a class="next1"title="Next ›"  href="#"  rel="history">Next &rsaquo;</a>
            </div>
            <ul id="ilist" class="thumbs">
                <!--li>
                    <a class="thumb" name="leaf" href="/kh/img/upload/5006e6d5f2479Vadeg.png"
                       title="Title #0">
                        <img src="/kh/img/upload/pr_5006e6d5f2479Vadeg.png" alt="Title #0"/>
                    </a>
                </li>
                <li>
                    <a class="thumb" name="leaf" href="/kh/img/upload/5006e6d5f2479Vadeg.png"
                       title="Title #0">
                        <img src="/kh/img/upload/pr_5006e6d5f2479Vadeg.png" alt="Title #0"/>
                    </a>
                </li-->
            </ul>
            <div class="bottom pagination">
                <!--span class="current">1</span>
                <a title="2" href="#16" rel="history">2</a-->
                <a class="prev1" title="Next ›" href="#16" rel="history">Prev &lsaquo;</a>
                <a class="next1" title="Next ›" href="#16" rel="history">Next &rsaquo;</a>
            </div>
        </div>
        <!-- End Advanced Gallery Html Containers -->
        <div style="clear: both;"></div>
    </div>
</div>
<div id="footer">footer</div>
<script>
    $.fn.hasAttr = function(name) {
        return this.attr(name) !== undefined;
    };

    var c_path = '<?php echo $c_path; ?>';
    var img_path = '<?php echo $img_path; ?>';

    var intId;

    function shuffle(arr) {
        for(
            var j, x, i = arr.length; i;
            j = parseInt(Math.random() * i),
                x = arr[--i], arr[i] = arr[j], arr[j] = x
            );
        return arr;
    }

    var page = 1;

    function removeImages(page) {

        if (intId != undefined) {
            return;
        }

        intId  = setInterval(function () {
            arr = $('li');
            if (arr.length > 0) {
                shuffle(arr).first().remove();
            } else {
                clearInterval(intId);
                intId = undefined;
                loadImages(page);
            }

        }, 150);
    }

    function loadImages(page) {
        //alert(page);
        $.getJSON(c_path + '?page=' + page, function (data) {
            var output = '';
            $.each(data.images, function (i, item) {
                output += '<li><a rel="example_group" class="thumb" href="' + img_path + item.file_name + '" title="' + item.description + '"><img src="' +
                    img_path + item.pr_file_name + '" alt="' + item.description + '"/></a></li>';
                (new Image()).src = img_path + item.pr_file_name;
            });
            $("#ilist").append(output);
            //alert(data.pager.current + '  ' + data.pager.next  + '  ' + data.pager.total + ' ' + data.pager.previous); //1 2 2

            if (data.pager.next) {
                if (!$(".next1").hasAttr("href")) {
                    $(".next1").attr("href", "#");
                }
                $(".next1").off('click');
                $(".next1").click(function() {
                    removeImages(data.pager.next);
                    //$("#ilist").empty();
                    //loadImages(data.pager.next);
                });
            } else {
                $(".next1").removeAttr("href");
                $(".next1").off('click');
            }

            if (data.pager.previous) {
                if (!$(".prev1").hasAttr("href")) {
                    $(".prev1").attr("href", "#");
                }
                $(".prev1").off('click');
                $(".prev1").click(function() {
                    removeImages(data.pager.previous);
                    //$("#ilist").empty();
                    //loadImages(data.pager.previous);
                });
            } else {
                $(".prev1").removeAttr("href");
                $(".prev1").off('click');
            }
        });
    }

    $(document).ready(function () {

        loadImages(1);

        $("a[rel=example_group]").livequery(function () {
            $(this).fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'type': 'image',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });
        });
    });
</script>

</body>
</html>